<!--
 * @Author: ShiJunJie
 * @Date: 2022-04-01 14:42:26
 * @LastEditors: ShiJunJie
 * @LastEditTime: 2022-04-13 16:35:36
 * @Descripttion: 
-->
<template>
  <a-layout id="basicLayout">
    <LayoutHeader />
    <a-layout id="layout-content-view">
      <div>
        <LayoutMenu style="height: 100%;" />
      </div>
      <LayoutContent>
        <template #main>
          <a-config-provider :getPopupContainer="getPopupContainer" :locale="locale">
            <RouterView />
          </a-config-provider>
        </template>
      </LayoutContent>
    </a-layout>
  </a-layout>
</template>
<script setup>
import LayoutMenu from './components/Menu/LayoutMenu.vue'
import LayoutHeader from './components/Header/LayoutHeader.vue'
import LayoutContent from './components/Content/LayoutContent.vue'

import { reactive, provide, readonly, onMounted, watch, computed, toRaw } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { _throttle } from '@/utils/util'

import storage from 'good-storage'

import enUS from 'ant-design-vue/es/locale/en_US'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
const locale = zhCN


const layoutContentViewStyle = reactive({})
onMounted(() => {
  setTimeout(() => {
    const layoutHeader = document.getElementById('layout-header')?.offsetHeight || 0
    document.getElementById('layout-content-view').style.height = `calc(100vh - ${layoutHeader}px)`
  }, 1);

  window.addEventListener(
    'resize',
    _throttle(() => {
      if (MenuClickType.value === false && window.innerWidth < 1366) {
        MenuState.collapsed = true
        MENU_TABS_STORAGE.set({ collapsed: MenuState.collapsed })
      } else if (MenuClickType.value === false && window.innerWidth > 1366) {
        MenuState.collapsed = false
        MENU_TABS_STORAGE.set({ collapsed: MenuState.collapsed })
      }
    })
  )

})

const getPopupContainer = (el, dialogContext) => {
  if (dialogContext) {
    return dialogContext.getDialogWrap()
  } else {
    return document.body
  }
}

const router = useRouter()

const userTokens = storage.get('USER_TOKEN')

const getMenuData = (tree = [], _responce = []) => {
  if (!tree.length) return []

  tree.forEach((e, i) => {
    if (!e?.meta?.menu) return

    _responce.push({ ...e /*children: [] */ })

    if (e.children && e.children.length > 0) {
      getMenuData(e.children, _responce.children)
    }
  })

  return _responce
}
const asyncRouter = storage.get('USER_ROUTERS') || []
const MenuDataAdmin = reactive(
  getMenuData([
    { id: 0, name: '工作台', path: '/', close: false, icon: 'icon-layers-o', meta: { menu: true }, },
    {
      id: 3,
      name: '应用管理',
      close: false,
      // path: "/admin/home",
      icon: 'icon-layers-o',
      meta: { menu: true },
      children: [
        {
          meta: { menu: true },
          id: '30',
          name: '单点应用',
          path: '/applicationManage/singleAppliction',
        },
        {
          id: '31',
          name: '认证应用',
          path: '/applicationManage/identificationAppliction',
        },
        {
          id: '32',
          name: '快捷应用',
          path: '/applicationManage/fastAppliction',
        },
        {
          id: '33',
          name: '上游数据应用',
          path: '/applicationManage/upstreamAppliction',
        },
        {
          id: '34',
          name: '下游数据应用',
          path: '/applicationManage/downstreamAppliction',
        },
      ],
    },
    ...asyncRouter,
  ])
)

// 导航菜单数据
const MenuData = MenuDataAdmin
console.log('MenuData', MenuData)

const defaultMenuTabsData = {
  tabs: {
    工作台: { id: 0, title: '工作台', path: '/', close: false },
  },
  openKeys: [],
  selectedKeys: [0],
  collapsed: false,
}
// 将导航条相关数据进行缓存
const MENU_TABS_STORAGE = {
  set: (e) => {
    storage.set(
      'MENU_TABS',
      (MENU_TABS_STORAGE.get() && { ...MENU_TABS_STORAGE.get(), ...e }) ||
      defaultMenuTabsData
    )
  },
  get: () => {
    return storage.get('MENU_TABS') || defaultMenuTabsData
  },
}

// 获取并设置导航条导航菜单的初始信息
const menuTabsStorage = MENU_TABS_STORAGE.get()
if (!menuTabsStorage) {
  MENU_TABS_STORAGE.set()
}

// 菜单属性
const MenuState = reactive({
  openKeys: menuTabsStorage.openKeys, // 初始展开
  selectedKeys: menuTabsStorage.selectedKeys, // 初始选中
  collapsed: menuTabsStorage.collapsed,
  // rootSubmenuKeys: [],
})
// 菜单整体
const BaseMenuData = {
  data: readonly(MenuData),
  state: MenuState,
  set: (e) => {
    MenuData.value = e
  },
}
provide('BaseMenuData', BaseMenuData)

let MenuClickType = ref(false)
const MenuSetCollapsed = () => {
  MenuClickType.value = true
  MenuState.collapsed = !MenuState.collapsed
  MENU_TABS_STORAGE.set({ collapsed: MenuState.collapsed })
}

provide('MenuSetCollapsed', MenuSetCollapsed)

// 头部选项卡
const TabsData = reactive({ value: menuTabsStorage.tabs })
const BaseTabsData = {
  data: readonly(TabsData),
  set: (e) => {
    TabsData.value = menuTabsStorage.tabs
  },
  add: (e) => {
    TabsData.value[e.title || e.name] = e
    const TabsDataVal = toRaw(TabsData.value)
    MENU_TABS_STORAGE.set({ tabs: TabsDataVal })
    // console.log(TabsDataVal)
  },
  del: (e) => {
    if ((e.title || e.name) !== '工作台') {
      console.log(e.id)
      if (MENU_TABS_STORAGE.get().selectedKeys[0] === e.id) {
        router.push(defaultMenuTabsData.tabs.工作台.path)
      }
      MenuState.selectedKeys = defaultMenuTabsData.selectedKeys
      delete TabsData.value[e.title || e.name]
      MENU_TABS_STORAGE.set({ tabs: TabsData.value })
    }
  },
}
provide('BaseTabsData', BaseTabsData)

// 含有子集的菜单点击
const MenuClick = (arr) => {
  // console.log(arr)
  MENU_TABS_STORAGE.set({ openKeys: arr })
}
provide('MenuClick', MenuClick)
// 末尾菜单点击
const MenuItemClick = (e) => {
  e.path && router.push(e.path)
  console.log(e)
  BaseTabsData.add(e)
  MENU_TABS_STORAGE.set({ selectedKeys: [e.id] })
}
provide('MenuItemClick', MenuItemClick)

// 头部导航条点击
const LayoutTabsClick = (e) => {
  MENU_TABS_STORAGE.set({ selectedKeys: [e.id] })
  MenuState.selectedKeys = [e.id]
}
provide('LayoutTabsClick', LayoutTabsClick)
</script>

<style lang="scss" scoped>
#basicLayout {
  height: 100%;
}
</style>
